<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>EasyFS文件服务器</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <style>
        html, body {
            height: 100%;
            overflow: hidden;
        }

        .file-choose {
            position: relative;
            background: #fff;
            height: 100%;
        }

        .file-choose-top-bar {
            position: relative;
        }

        .file-choose-top-text {
            padding: 12px;
        }

        .file-choose-top-btn-group {
            position: absolute;
            right: 12px;
            top: 5px;
        }

        .file-choose-list {
            position: absolute;
            top: 40px;
            bottom: 48px;
            left: 0;
            right: 0;
            overflow: auto;
            padding: 0 8px;
        }

        .file-choose-bottom-bar {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            border-top: 1px solid #eee;
            padding: 8px 12px;
            text-align: right;
        }

        .file-choose-list-item {
            position: relative;
            display: inline-block;
            vertical-align: top;
            padding: 15px 8px;
            overflow: visible;
            cursor: pointer;
        }

        .file-choose-list-item:hover {
            background-color: #eee;
        }

        .file-choose-list-item-img {
            width: 90px;
            height: 90px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }

        .file-choose-list-item-img.img-icon {
            background-size: inherit;
        }

        .file-choose-list-item-img.active:after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.3);
        }

        .file-choose-list-item-name {
            width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333;
            font-size: 12px;
            text-align: center;
            margin-top: 12px;
        }

        .file-choose-list-item-ck {
            position: absolute;
            right: 8px;
            top: 15px;
        }

        .file-choose-list-item-ck .layui-form-checkbox {
            padding: 0;
        }

        .file-choose-oper-menu {
            background-color: #fff;
            position: absolute;
            left: 8px;
            top: 15px;
            border-radius: 2px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, .15);
            transition: all .3s;
            overflow: hidden;
            transform: scale(0);
            transform-origin: left top;
        }

        .file-choose-oper-menu.file-choose-oper-menu-show {
            transform: scale(1);
        }

        .file-choose-oper-menu-item {
            color: #555;
            padding: 8px 5px;
            font-size: 14px;
            min-width: 70px;
            text-align: center;
            cursor: pointer;
            display: block;
        }

        .file-choose-oper-menu-item:hover {
            background-color: #eee;
        }

    </style>
</head>
<body>

<div class="file-choose">
    <div class="file-choose-top-bar">
        <div class="file-choose-top-text">当前位置：<span id="fc-current-position">/</span></div>
        <div class="file-choose-top-btn-group">
            <button id="fc-btn-back" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                <i class="layui-icon">&#xe65c;</i>上级
            </button>
            <button id="fc-btn-refresh" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                <i class="layui-icon">&#xe669;</i>刷新
            </button>
            <button id="fc-btn-upload" class="layui-btn layui-btn-sm icon-btn" style="margin-right: 0;">
                <i class="layui-icon">&#xe681;</i>上传
            </button>
        </div>
    </div>
    <div class="file-choose-list">
    </div>
    <div class="file-choose-bottom-bar">
        <button id="fc-btn-ok-sel" class="layui-btn layui-btn-sm layui-btn-normal icon-btn">完成选择</button>
    </div>
</div>

<!-- 下拉菜单 -->
<div class="dropdown-menu dropdown-anchor-top-left" id="fc-dropdown-choose">
    <div class="dropdown-anchor"></div>
    <ul>
        <li><a id="fc-dropdown-btn-open"><i class="layui-icon layui-icon-file"></i>&emsp;查看&emsp;</a></li>
        <li><a id="fc-dropdown-btn-sel"><i class="layui-icon layui-icon-release"></i>&emsp;选择&emsp;</a></li>
    </ul>
</div>

<!-- 渲染模板 -->
<script id="file-choose-tpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="file-choose-list-item" data-index="{{index}}">
        {{# var url; if(item.hasSm){ url = item.smUrl; }}
        {{# }else{ url='assets/images/fti/'+item.type+'.png'; }}
        {{# } }}
        <div class="file-choose-list-item-img {{item.hasSm?'':'img-icon'}}" style="background-image: url('{{url}}')">
        </div>
        <div class="file-choose-list-item-name">{{item.name}}</div>
        {{# if(!item.isDir && multi=='true'){ }}
        <div class="file-choose-list-item-ck layui-form">
            <input type="checkbox" lay-skin="primary" lay-filter="file-choose-item-ck"/>
        </div>
        {{# } }}
        <div class="file-choose-oper-menu">
            <div class="file-choose-oper-menu-item">选择</div>
            <div class="file-choose-oper-menu-item">查看</div>
            <div class="file-choose-oper-menu-item">删除</div>
        </div>
    </div>
    {{#  }); }}
    {{# if(d.length<=0){ }}
    <div class="file-choose-empty">
        <i class="layui-icon layui-icon-face-surprised"></i>
        <p>没有文件</p>
    </div>
    {{# } }}
</script>

<script type="text/javascript" src="assets/layui/layui.js"></script>
<script type="text/javascript" src="assets/config.js"></script>
<script>
    var accept, exts, multi, maxNum;  // 参数配置
    layui.use(['jquery', 'layer', 'form', 'upload', 'laytpl', 'util'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        var util = layui.util;

        accept = getQueryString("accept");
        exts = getQueryString("exts");
        multi = getQueryString("multi");
        maxNum = getQueryString("maxNum");
        if (!accept) {
            accept = 'file';
        }
        if (multi && multi == 'true') {
            $('body').addClass('fc-bottom-show-block');
        }

        // 渲染文件列表
        function renderList(dir) {
            if (!dir) {
                dir = $('#fc-current-position').text();
            }
            /*layer.load(2);
            $.get(baseServer + 'api/list', {
                dir: dir,
                accept: accept,
                exts: exts
            }, function (res) {
                layer.closeAll('loading');*/
            var res = JSON.parse('{"msg":"查询成功","code":200,"data":[{"smUrl":"sm/2019/06/27/DIGITAL LIGHT.JPG","hasSm":true,"name":"0065SLfTgy1fqfsyt020wj32801e0x6q.jpg","updateTime":1561611464764,"type":"file","url":"2019/06/27/DIGITAL LIGHT.JPG","isDir":false},{"smUrl":"sm/2019/06/27/DIGITAL LIGHT.JPG","hasSm":true,"name":"20160826152553_28b02a.jpg","updateTime":1561611468622,"type":"file","url":"2019/06/27/DIGITAL LIGHT.JPG","isDir":false},{"name":"0.flv","updateTime":1561611474533,"type":"mp4","url":"2019/06/27/0.flv","isDir":false},{"smUrl":"sm/2019/06/27/DIGITAL LIGHT.JPG","hasSm":true,"name":"a0e0bffa077b4218a0739433439521e2.jpg","updateTime":1561611477739,"type":"file","url":"2019/06/27/DIGITAL LIGHT.JPG","isDir":false},{"smUrl":"sm/2019/06/27/DIGITAL LIGHT.JPG","hasSm":true,"name":"background.bmp","updateTime":1561611481103,"type":"file","url":"2019/06/27/DIGITAL LIGHT.JPG","isDir":false},{"smUrl":"sm/2019/06/27/DIGITAL LIGHT.JPG","hasSm":true,"name":"emptybox.png","updateTime":1561611498346,"type":"file","url":"2019/06/27/DIGITAL LIGHT.JPG","isDir":false},{"smUrl":"sm/2019/06/27/DIGITAL LIGHT.JPG","hasSm":true,"name":"微信图片_20180423141141.jpg","updateTime":1561611507742,"type":"file","url":"2019/06/27/DIGITAL LIGHT.JPG","isDir":false},{"smUrl":"sm/2019/06/27/DIGITAL LIGHT.JPG","hasSm":true,"name":"微信图片_20180423141146.jpg","updateTime":1561611510935,"type":"file","url":"2019/06/27/DIGITAL LIGHT.JPG","isDir":false},{"smUrl":"sm/2019/06/27/DIGITAL LIGHT.JPG","hasSm":true,"name":"微信图片_20180423140343.jpg","updateTime":1561611517206,"type":"file","url":"2019/06/27/DIGITAL LIGHT.JPG","isDir":false},{"name":"连接模拟器.bat","updateTime":1561611527228,"type":"file","url":"2019/06/27/连接模拟器.bat","isDir":false},{"name":"试题模板(一次最多可添加3000条)2019年06月21日 16时59分25秒.xls","updateTime":1561611551231,"type":"xls","url":"2019/06/27/试题模板(一次最多可添加3000条)2019年06月21日 16时59分25秒.xls","isDir":false},{"name":"常用命令.txt","updateTime":1561611565969,"type":"txt","url":"2019/06/27/常用命令.txt","isDir":false}]}')
            if (res.code == 200) {
                for (var i = 0; i < res.data.length; i++) {
                    res.data[i].url = baseServer + 'file/' + res.data[i].url;
                    res.data[i].smUrl = baseServer + 'file/' + res.data[i].smUrl;
                }
                laytpl($('#file-choose-tpl').html()).render(res.data, function (html) {
                    $('#fc-btn-ok-sel').text('完成选择');
                    $('.file-choose-list').html(html);
                    form.render('checkbox');
                });
            } else {
                layer.msg(res.msg, {icon: 2});
            }
            /*});*/
        }

        renderList('/2019/06/27');

        // 上传文件事件
        var nExts;
        if (exts) {
            nExts = exts.replace(/,/g, "|");
        }
        upload.render({
            elem: '#fc-btn-upload',
            url: baseServer + 'file/upload',
            choose: function (obj) {
                layer.load(2);
            },
            done: function (res, index, upload) {
                layer.closeAll('loading');
                if (res.code != 200) {
                    layer.msg(res.msg, {icon: 2});
                } else {
                    layer.msg(res.msg, {icon: 1});
                    $('#fc-current-position').text(util.toDateString(new Date(), '/yyyy/MM/dd'));
                    renderList();
                }
            },
            error: function () {
                layer.closeAll('loading');
                layer.msg('上传失败', {icon: 2});
            },
            accept: accept == 'image' ? 'imagess' : accept,
            exts: nExts
        });

        // 刷新
        $('#fc-btn-refresh').click(function () {
            renderList();
        });

        var mUrl;
        // 列表点击事件
        $('body').on('click', '.file-choose-list-item', function (e) {
            $(this).find('.file-choose-oper-menu').toggleClass('file-choose-oper-menu-show');
            var isDir = $(this).data('dir');
            var name = $(this).data('name');
            mUrl = $(this).data('url');
            $('#copy').attr('data-clipboard-text', mUrl);
            if (isDir) {
                var cDir = $('#fc-current-position').text();
                cDir += (cDir == '/' ? name : ('/' + name));
                $('#fc-current-position').text(cDir);
                renderList(cDir);
            } else {
                var $target = $(this).find('.fc-file-list-group-img');
                $('#fc-dropdown-choose').css({
                    'top': $target.offset().top + 90,
                    'left': $target.offset().left + 25
                });
                $('#fc-dropdown-choose').addClass('dropdown-opened');
                if (e !== void 0) {
                    e.preventDefault();
                    e.stopPropagation();
                }
            }
        });

        // 返回上级
        $('#fc-btn-back').click(function () {
            var cDir = $('#fc-current-position').text();
            if (cDir == '/') {
                // layer.msg('已经是根目录', {icon: 2})
            } else {
                cDir = cDir.substring(0, cDir.lastIndexOf('/'));
                if (!cDir) {
                    cDir = '/';
                }
                $('#fc-current-position').text(cDir);
                renderList(cDir);
            }
        });

        // 点击空白隐藏下拉框
        $('html').off('click.dropdown').on('click.dropdown', function () {
            $('#copy').attr('data-clipboard-text', '');
            $('#fc-dropdown-choose').removeClass('dropdown-opened');
        });

        // 打开
        $('#fc-dropdown-btn-open').click(function () {
            window.fc - dropdown - btn - open(mUrl);
        });
        // 选择
        $('#fc-dropdown-btn-sel').click(function () {
            if (!multi || multi == 'false') {
                var urls = [];
                urls.push(mUrl);
                parent.mFsUrls = urls;
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            } else {
                /*var $ck = $('.fc-file-list-group-item[data-url="' + mUrl + '"] input[name="imgCk"]');
                $ck.prop('checked', !$ck.prop('checked'));
                form.render('checkbox');
                $ck.parents('.fc-file-list-group-item').toggleClass('active');
                $('#fc-btn-ok-sel').text('完成选择(' + $('input[name="imgCk"]:checked').length + ')');*/
                $('.fc-file-list-group-item[data-url="' + mUrl + '"] .layui-form-checkbox').trigger('click');
            }
        });

        // 多选框事件
        $('body').on('click', '.fc-file-list-group-ck', function (e) {
            if (e !== void 0) {
                e.preventDefault();
                e.stopPropagation();
            }
        });

        // 完成选择按钮
        $('#fc-btn-ok-sel').click(function () {
            var urls = [];
            $('input[name="imgCk"]:checked').each(function () {
                urls.push($(this).parents('.fc-file-list-group-item').data('url'));
            });
            if (urls.length <= 0) {
                layer.msg('请选择', {icon: 2});
                return;
            }
            if (maxNum && parseInt(maxNum) > 1 && urls.length > maxNum) {
                layer.msg('最多只能选择' + maxNum + '个', {icon: 2});
                return;
            }
            parent.mFsUrls = urls;
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });

        // 监听复选框选中
        form.on('checkbox(file-choose-item-ck)', function (data) {
            var ckSize = $('input[lay-filter="file-choose-item-ck"]:checked').length;
            if (data.elem.checked) {
                if (maxNum && parseInt(maxNum) > 1 && ckSize > maxNum) {
                    layer.msg('最多只能选择' + maxNum + '个', {icon: 2});
                    $(data.elem).prop('checked', false);
                    form.render('checkbox');
                    return;
                }
                $(data.elem).parents('.fc-file-list-group-item').addClass('active');
            } else {
                $(data.elem).parents('.fc-file-list-group-item').removeClass('active');
            }
            $('#fc-btn-ok-sel').text('完成选择(' + ckSize + ')');
        });

    });

    // 获取url参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>
</body>
</html>